<template>
	<div class="dataReportContainer">
		<Spin v-show="!initFinish" fix></Spin>
		<div v-show="initFinish">
			<common-header title="数据质量月报" @getData="dataInit" />

			<div class="tab">
				<RPButton optType="confirm" text="数据质量月报" @click.native="jumpLink('data-quality-home')" />
				<RPButton optType="confirm" ghost text="合规监管月报" @click.native="jumpLink('procure-supervise-home')" />
			</div>

			<div class="column-flex">
				<div class="row-flex lineOne">
					<div class="lineOne-div grid-main-card">
						<div class="card-title-wrap">
							<card-title title="业务单元排行榜"></card-title>
						</div>
						<div class="main-content">
							<chart-buBank :reportData="buBankReport" :buName="buName" :initFinish="initFinish"
								ref='buBank'/>
						</div>
					</div>
				</div>

				<div class="row-flex lineOne">
					<div class="lineOne-div grid-main-card">
						<div class="card-title-wrap">
							<card-title title="报送数据量核比（★★★★）"></card-title>
							<Tooltip placement="top" content="下载明细问题数据">
								<img src="../../asset/images/download.png" class="icon-down"
									@click="downLoad('submissions')"></img>
							</Tooltip>
						</div>

						<div class="main-content">
							<chart-submissions :reportData="submReport" :buName="buName" :initFinish="initFinish" />
							<table-submissions :tableData="submTable" :buName="buName" style="width: 55%;"
								ref='submissions' />
						</div>
					</div>
				</div>

				<div class="row-flex lineTwo">
					<div class="lineTwo-div grid-main-card">
						<div class="card-title-wrap">
							<card-title title="非结构化附件报送率（★★★）"></card-title>
							<Tooltip placement="top" content="下载明细问题数据">
								<img src="../../asset/images/download.png" class="icon-down"
									@click="downLoad('attachments')"></img>
							</Tooltip>
						</div>

						<div class="main-content flex-col">
							<chart-attachments :reportData="attachReport" :buName="buName" />
							<table-attachments :tableData="attachTable" :buName="buName" ref='attachments' />
						</div>
					</div>

					<div class="lineTwo-div grid-main-card">
						<div class="card-title-wrap">
							<card-title title="履约及支付滚动报送率（★★★★）">
								<Tooltip placement="top" max-width="200"
									content='国资委要求合同首次报送后，直至合同正常履约结束或合同中止/终止履约期间，表7-8需逐月规范滚动报送。'>
									<Icon type="md-help-circle" class="icon" size="20" />
								</Tooltip>
							</card-title>
							<Tooltip placement="top" content="下载明细问题数据">
								<img src="../../asset/images/download.png" class="icon-down"
									@click="downLoad('payment')"></img>
							</Tooltip>
						</div>

						<div class="main-content flex-col">
							<chart-payment :reportData="paymentReport" :buName="buName" />
							<table-payment :tableData="paymentTable" :buName="buName" ref='payment' />
						</div>
					</div>
				</div>

				<div class="row-flex lineOne">
					<div class="lineOne-div grid-main-card">
						<div class="card-title-wrap">

							<card-title :title="`报送表单结构完整率（★★★★★）${toFixPercent(subFormTotal)}`">
								<Tooltip placement="top" max-width="200" :content='`${buName}当期上报标段中，完整报送表1-表8的标段占比`'>
									<Icon type="md-help-circle" class="icon" size="20" />
								</Tooltip>
							</card-title>

							<Tooltip placement="top" content='下载明细问题数据'>
								<img src="../../asset/images/download.png" class="icon-down"
									@click="downLoad('subForm')"></img>
							</Tooltip>
						</div>

						<div class="main-content">
							<table-subForm :tableData="subFormTable" :buName="buName" style="width: 100%;"
								ref='subForm' />
						</div>
					</div>
				</div>

				<div class="row-flex lineOne">
					<div class="lineOne-div grid-main-card">
						<div class="card-title-wrap">

							<card-title :title="`框架协议完整报送率（★★★★）${toFixPercent(frameworkTotal)}`">
								<Tooltip placement="top" max-width="200"
									:content='`${buName}当期上报数据涉及框架协议的合同中，完整报送框架协议及子协议的合同数占比`'>
									<Icon type="md-help-circle" class="icon" size="20" />
								</Tooltip>
							</card-title>

							<Tooltip placement="top" content='下载明细问题数据'>
								<img src="../../asset/images/download.png" class="icon-down"
									@click="downLoad('framework')"></img>
							</Tooltip>
						</div>

						<div class="main-content">
							<table-framework :tableData="frameworkTable" :buName="buName" style="width: 100%;"
								ref='framework' />
						</div>
					</div>
				</div>


				<div class="row-flex lineOne">
					<div class="lineOne-div grid-main-card">
						<div class="card-title-wrap">
							<card-title title="非结构化数据内容质量问题分布（★★★★）"></card-title>
						</div>

						<div class="main-content flex-col">
							<div>
								<div class="sub-title">表1-招采文件质量问题清单
									<Tooltip placement="top" content='跳转至异常数据'>
										<img src="../../asset/images/download.png" class="icon-down"
											@click="linkAbnormal"></img>
									</Tooltip>
								</div>
								<table-bidDoc :tableData="bidDocTable" :buName="buName" style="width: 100%;"
									ref='bidDoc' />
							</div>

							<div class="sub-title-bt">
								<div class="sub-title">表3-分项报价表质量问题清单
									<Tooltip placement="top" max-width="200" content='跳转至异常数据'>
										<img src="../../asset/images/download.png" class="icon-down"
											@click="linkAbnormal"></img>
									</Tooltip>
								</div>

								<table-quotation :tableData="quotationTable" :buName="buName" style="width: 100%;"
									ref='quotation' />
							</div>
						</div>
					</div>
				</div>

				<div class="row-flex lineOne">
					<div class="lineOne-div grid-main-card">
						<div class="card-title-wrap">
							<div class="tabs-wrap">
								<card-title title="结构化字段填报质量问题分布（★★★★）"></card-title>
								<Tooltip placement="top">
									<div class="tabs">
										<span v-for="item in tabList" :key="item.value"
											:class="{'active': item.value == tbNames}"
											@click="changeTab(item)">{{ item.label }}</span>
									</div>
									<div slot="content">
										<p>招采：表1-表3</p>
										<p>合同：表4-表6</p>
										<p>履约：表7-表8</p>
									</div>
								</Tooltip>
							</div>

							<Tooltip placement="top" content="跳转至异常数据">
								<img src="../../asset/images/download.png" class="icon-down"
									@click="linkAbnormal"></img>
							</Tooltip>
						</div>

						<div class="main-content" v-show="initQualit">
							<chart-quality :reportData="qualityReport" :buName="buName" :qualityTotal="qualityTotal" />
							<div style="width: 55%;">
								<table-quality :tableData="qualityTable" :buName="buName" />
							</div>
						</div>
						<div style="height: 330px;" v-show="!initQualit"></div>
						<Spin v-show="!initQualit" fix style="height: 330px;"></Spin>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		dataQualityAPI
	} from "@api/dataQuality";
	import chartAttachments from "./components/chart-attachments.vue"
	import chartBuBank from "./components/chart-buBank.vue"
	import chartPayment from "./components/chart-payment.vue"
	import chartSubmissions from "./components/chart-submissions.vue"
	import tableAttachments from "./components/table/attachments.vue"
	import tablePayment from "./components/table/payment.vue"
	import tableSubmissions from "./components/table/submissions.vue"
	import tableSubForm from "./components/table/subForm.vue"
	import tableFramework from "./components/table/framework.vue"
	import tableBidDoc from "./components/table/bidDoc.vue"
	import tableQuotation from "./components/table/quotation.vue"
	import tableQuality from "./components/table/quality.vue"
	import chartQuality from "./components/chart-quality.vue"
	import commonHeader from "./components/common-header.vue"
	import cardTitle from "./components/card-title.vue"
	import {
		excelHandle
	} from "@/tools/util";
	export default {
		components: {
			chartBuBank,
			chartAttachments,
			chartPayment,
			chartSubmissions,
			tableAttachments,
			tablePayment,
			tableSubmissions,
			tableSubForm,
			tableFramework,
			tableBidDoc,
			tableQuotation,
			tableQuality,
			chartQuality,
			commonHeader,
			cardTitle
		},

		data() {
			return {
				queryData: {},
				buName: "",
				submReport: {},
				subFormTotal: "",
				frameworkTotal: "",
				qualityTotal: "",
				buBankReport: [],
				submTable: [],
				attachReport: {},
				attachTable: [],
				paymentReport: {},
				paymentTable: [],
				subFormTable: [],
				frameworkTable: [],
				bidDocTable: [],
				quotationTable: [],
				qualityTable: [],
				qualityReport: [],
				renderKey1: "",
				renderKey2: "",
				renderKey3: "",
				renderKey4: "",
				renderKey5: "",
				renderKey6: "",
				renderKey7: "",
				renderKey8: "",
				tbNames: "",
				tabList: [{
						label: '所有',
						value: ''
					},
					{
						label: '招采',
						value: '表1,表2,表3'
					},
					{
						label: '合同',
						value: '表4,表5,表6'
					},
					{
						label: '履约',
						value: '表7,表8'
					}
				],
				initFinish: false,
				initQualit: false
			}
		},

		methods: {
			dataInit(params) {
				this.initFinish = false;
				this.buName = params.buName;
				this.queryData = Object.assign({}, params)
				this.getBuRankReport()
				this.getDataReport()
				this.getUnstructuredReport()
				this.getPerfAndPayReport()
				this.getTbReport()
				this.getFrameworkAgrReport()
				this.getBidFileCountReport()
				this.getQuotationCountReport()
				this.getFieldFillingQualityReport()
			},

			//业务单元排行榜
			getBuRankReport() {
				dataQualityAPI.buRankReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.buBankReport = res?.data || [];
					}
				})
			},

			//报送数据量核比
			getDataReport() {
				dataQualityAPI.getDataReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.submReport = res?.data || {};
						this.submTable = res?.data?.dataList || []
					}
				})
			},

			//非结构化附件报送率
			getUnstructuredReport() {
				dataQualityAPI.getUnstructuredReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.attachReport = res?.data || {};
						this.attachTable = res?.data?.dataList || []
					}
				})
			},

			//履约及支付滚动报送率
			getPerfAndPayReport() {
				dataQualityAPI.getPerfAndPayReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.paymentReport = res?.data || {};
						this.paymentTable = res?.data?.dataList || []
					}
				})
			},

			//报送表单结构完整率
			getTbReport() {
				dataQualityAPI.tbReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.subFormTable = res?.data?.dataList || []
						this.subFormTotal = res?.data?.totalRate || ""
					}
				})
			},

			//框架协议完整报送率
			getFrameworkAgrReport() {
				dataQualityAPI.frameworkAgrReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.frameworkTable = res?.data?.dataList || []
						this.frameworkTotal = res?.data?.totalRate || ""
					}
				})
			},

			//月报-非结构化数据内容质量问题分布-表1-招标文件质量问题清单
			getBidFileCountReport() {
				dataQualityAPI.bidFileCountReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.bidDocTable = res?.data || []
					}
				})
			},

			//月报-非结构化数据内容质量问题分布-表3-分项报价表质量问题清单
			getQuotationCountReport() {
				dataQualityAPI.quotationCountReport(this.queryData).then(res => {
					if (res.code === 200) {
						this.quotationTable = res?.data || [];
					}
				})
			},

			//月报-结构化字段填报质量问题分布
			getFieldFillingQualityReport() {
				const params = Object.assign({}, this.queryData, {
					tbNames: this.tbNames
				})
				dataQualityAPI.fieldFillingQualityReport(params).then(res => {
					if (res.code === 200) {
						this.qualityTable = res?.data?.dataList || [];
						this.qualityReport = res?.data?.topList || [];
						this.qualityTotal = res?.data?.totalNum || 0;
					}
					this.initFinish = true;
					this.$nextTick(() => {
						this.$refs.submissions.$refs.listTable.load();
						this.$refs.attachments.$refs.listTable.load();
						this.$refs.payment.$refs.listTable.load();
						this.$refs.subForm.$refs.listTable.load();
						this.$refs.framework.$refs.listTable.load();
						this.$refs.bidDoc.$refs.listTable.load();
						this.$refs.quotation.$refs.listTable.load();
					})
					//loading结束以后，显示整个页面，重新渲染表格数据
					this.initQualit = true
				})
			},

			downLoad(type) {
				const downUrlMap = {
					submissions: dataQualityAPI.dataReportExport,
					attachments: dataQualityAPI.unstructuredReportExport,
					payment: dataQualityAPI.perfAndPayReportExport,
					subForm: dataQualityAPI.tbReportExport,
					framework: dataQualityAPI.frameworkAgrReportExport,
				}
				this.$Spin.show()
				downUrlMap[type](this.queryData).then(res => {
					excelHandle(res)
					this.$Spin.hide()
				})
			},
			
			changeTab(item) {
				this.initQualit = false;
				this.tbNames = item.value
				this.getFieldFillingQualityReport()
			},

			linkAbnormal() {
				const myNodeList = document.querySelectorAll('.ivu-tooltip-popper')
				myNodeList.forEach(ele => {
					ele.style.display = 'none'
				})
				this.$router.push({
					path: "abnormal-data"
				})
			},

			jumpLink(path) {
				// window.location.href = import.meta.env.VITE_SKIP_BASE_URL+'supervision-report'
				this.$router.push({
					path: path
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.dataReportContainer {
		padding: 10px 40px 20px 40px;
		height: 100%;
		width: 100%;
		// min-height: 100vh;
		background-color: rgb(229, 237, 247) !important;
		background: rgb(229, 237, 247) !important;
		display: flex;
		flex-direction: column;
		// background-image: url('../../asset/images/background.png') !important;
		background-size: 100% 100%;
		overflow-x: auto;

		.tab {
			margin-top: 20px;

			button {
				width: 130px;
				height: 45px;
				margin-right: 40px;
				border-radius: 5px;
			}
		}

		.column-flex {
			display: flex;
			flex-direction: column;
			gap: 25px;
			align-items: center;
			padding-top: 20px;

			.row-flex {
				display: flex;
				gap: 25px;
				align-items: center;

				.grid-main-card {
					position: relative;
					background-color: rgba(255, 255, 255, 0.9);
					border-radius: 10px;
					border: 2px solid #fff;
					padding: 20px;

					.card-title-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabs-wrap {
							display: flex;
							align-items: center;

							.tabs {
								display: flex;
								border: 1px solid #ccc;
								border-radius: 5px;

								span {
									cursor: pointer;
									padding: 6px 20px;

									&:not(:last-child) {
										border-right: 1px solid #ccc;
									}
								}

								.active {
									border: none;
									color: #fff;
									background: #FFAD11;
								}
							}
						}

						.icon {
							cursor: pointer;
							margin-bottom: 8px;
							color: #000;
						}
					}

					.main-content {
						padding-top: 30px;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
					}

					.flex-col {
						flex-direction: column;
					}
				}
			}

			.lineOne {
				width: 100%;

				.lineOne-div {
					width: 100%;
				}
			}

			.lineTwo {
				width: 100%;
				gap: 0;
				justify-content: space-between;

				.lineTwo-div {
					width: 49%;
					box-sizing: border-box;
				}
			}
		}

		.icon-down {
			cursor: pointer;
			width: 24px;
			height: 24px;
		}

		.sub-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			font-size: 16px;
			font-weight: bold;

			img {
				margin-left: 10px;
			}
		}

		.sub-title-bt {
			margin-top: 30px
		}

		::v-deep .ivu-table {

			.ivu-table-header thead tr th:first-child,
			.ivu-table-body tbody tr td:first-child {
				padding-left: 0 !important;
			}

			.ivu-table-header thead tr th:nth-last-child(2) {
				padding-right: 0 !important;
			}
		}

	}

	::v-deep .ivu-table {
		.row-tips {
			.t-action-btn {
				i {
					color: #000 !important;
				}
			}
		}

		.row-tips-warn {
			.t-action-btn {
				i {
					color: #ec808d !important;
				}
			}
		}
	}
</style>